<!-- 赛事信息界面 -->
<template>
  <div
    class="
      venue-display
      flex flex-direction
      strut-absolute
      padding-top-xl padding-lr-xl padding-bottom-xs
    "
    style="overflow-y: scroll; overflow-x: hidden; height: 100%"
  >
  <template>
  <el-form inline="inline" v-model="searchParam">
    <el-form-item label="赛事板块" style="margin-left:2%">
      <el-select v-model="searchParam.contestSpeciesId">
        <el-option
        v-for="item in speciesList"
        :key="item.id"
        :label="item.name"
        :value="item.id"
        >
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="赛事分类" style="margin-left:4%">
      <el-select v-model="searchParam.status">
        <el-option
        v-for="item in sortList"
        :key="item.code"
        :label="item.status"
        :value="item.code">
        </el-option>
      </el-select>
    </el-form-item>
    <el-button type="primary" icon="el-icon-search"
  style="margin-left:18%" @click="getContestList">
  查询
      </el-button>
      <el-button type="primary" plain icon="el-icon-refresh"
  style="margin-left:2%" @click="reset">
  重置
      </el-button>
    <el-button type="primary"
  style="margin-left:2%" @click="openDialog">
  添加赛事
      </el-button>
  </el-form>
  
    </template>
    <br>
    <el-table border
    :data="data">
      <el-table-column label="赛事名称" align="center" width="250px"
      prop="name">
    <template slot-scope="scope">
      <el-button type="text" @click="openDetailDialog(scope.row)">
        {{ scope.row.name }}
      </el-button>
    </template>
    </el-table-column>
      <el-table-column label="赛事板块" align="center" width="140px"
      prop="speciesId">
      <template slot-scope="scope">
        {{speciesMappingToName(scope.row.speciesId)}}
      </template>
    </el-table-column>
      <el-table-column label="赛事开始时间" align="center" width="180px"
      prop="startDate">
 
    </el-table-column>
      <el-table-column label="赛事结束时间" align="center" width="180px"
      prop="endDate">
   
    </el-table-column>
      <el-table-column label="操作" align="center" width="600">
        <template slot-scope="scope">
        <el-button type="primary" 
        @click="openEditDialog(scope.row)"
        >
        修改
      </el-button>
      <el-button type="danger" 
        @click="removeContest(scope.row.id)"
        >
        删除
      </el-button>
      <el-button type="info" 
        @click="getTeamInfo(scope.row.id)"
        >
        查看参赛队伍
      </el-button>
      <el-button type="success" 
        @click="manageEventAnnouncement(scope.row.id, scope.row.name)"
        >
        管理公告
      </el-button>
      <el-button type="primary"  @click="openAddTeamDialog(scope.row.id)">
        添加队伍
      </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 修改弹窗 -->
    <el-dialog
    style="width: 118%;margin-left: -5%;"
    :visible.sync="editDialogVisible">
    <el-form label-width="100px" :model="editContestParams">
      <el-form-item style="width:98%"
      label="赛事名称">
        <el-input v-model="editContestParams.name"></el-input>
      </el-form-item>
      <!-- <el-form inline="inline"> -->
        <el-form-item label="赛事板块" >
          <el-select disabled
          v-model="editContestParams.speciesId">
            <el-option
            v-for="item in speciesList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
            >
            </el-option>
          </el-select>
      <span style="margin-left:30px;font-size: larger;font-weight: ;">
        &nbsp;&nbsp;赛事时间 
      </span>
        <el-date-picker
        style="margin-left:5px"
        format="yyyy-MM-dd"
        value-format="yyyy-MM-dd"
      v-model="editContestParams.startDate"
      type="date"
      placeholder="选择日期">
    </el-date-picker>
     &nbsp;&nbsp;—&nbsp;&nbsp;
    <el-date-picker
      v-model="editContestParams.endDate"
      format="yyyy-MM-dd"
      value-format="yyyy-MM-dd"
      type="date"
      placeholder="选择日期">
    </el-date-picker>
      </el-form-item>
      <!-- </el-form> -->
      <el-form-item label="赛事说明">
        <el-input class="input_text_inner"
        style="display: inline-block;width: 98%;"
        type="textarea" v-model="editContestParams.info"></el-input>
      </el-form-item>
  
      <el-form-item>
        <el-button
        style="width: 40%;"
        @click.native.prevent="cancelEditDialog"
        >取 消</el-button
      >
        <el-button
        type="primary"
        style="width: 40%; margin-left: 20%;"
        @click.native.prevent="editContest"
        >确 定</el-button
      >
      </el-form-item>
    </el-form>
    </el-dialog>
    <!-- 新增弹窗 -->
    <el-dialog
    style="width: 118%;margin-left: -5%;"
    :visible.sync="dialogVisible">
    <el-form label-width="70px" :model="contest">
      <el-form-item style="width:98%"
      label="赛事名称">
        <el-input v-model="contest.name"></el-input>
      </el-form-item>
      <el-form inline="inline">
        <el-form-item label="赛事板块">
          <el-select v-model="contest.speciesId">
            <el-option
            v-for="item in speciesList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
            >
            </el-option>
          </el-select>
      </el-form-item>
      <el-form-item style="margin-left:4%"
      label="赛事时间">
        <el-date-picker
        format="yyyy-MM-dd"
        value-format="yyyy-MM-dd"
      v-model="contest.startDate"
      type="date"
      placeholder="选择日期">
    </el-date-picker>
     &nbsp;&nbsp;—&nbsp;&nbsp;
    <el-date-picker
      v-model="contest.endDate"
      format="yyyy-MM-dd"
      value-format="yyyy-MM-dd"
      type="date"
      placeholder="选择日期">
    </el-date-picker>
      </el-form-item>
      </el-form>
      <el-form-item label="赛事说明">
        <el-input class="input_text_inner"
        style="display: inline-block;width: 98%;"
        type="textarea" v-model="contest.info"></el-input>
      </el-form-item>
  
      <el-form-item>
        <el-button
        style="width: 40%;"
        @click.native.prevent="cancelDialog"
        >取 消</el-button
      >
        <el-button
        type="primary"
        style="width: 40%; margin-left: 20%;"
        @click.native.prevent="addContest"
        >确 定</el-button
      >
      </el-form-item>
    </el-form>
    </el-dialog>
<!-- 赛事详情弹窗 -->
<el-dialog
    style="width: 118%;margin-left: -5%;"
    :visible.sync="detailContestVisible">
    <el-form label-width="70px" :model="detailContest">
      <el-form-item style="width:98%"
      label="赛事名称">
        <el-input v-model="detailContest.name"></el-input>
      </el-form-item>
      <el-form inline="inline">
        <el-form-item label="赛事板块">
          <el-select disabled
          v-model="detailContest.speciesId">
            <el-option
            v-for="item in speciesList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
            >
            </el-option>
          </el-select>
      </el-form-item>
      <el-form-item style="margin-left:4%"
      label="赛事时间">
        <el-date-picker
        format="yyyy-MM-dd"
        value-format="yyyy-MM-dd"
      v-model="detailContest.startDate"
      type="date"
      placeholder="选择日期">
    </el-date-picker>
     &nbsp;&nbsp;—&nbsp;&nbsp;
    <el-date-picker
      v-model="detailContest.endDate"
      format="yyyy-MM-dd"
      value-format="yyyy-MM-dd"
      type="date"
      placeholder="选择日期">
    </el-date-picker>
      </el-form-item>
      </el-form>
      <el-form-item label="赛事说明">
        <el-input class="input_text_inner"
        style="display: inline-block;width: 98%;"
        type="textarea" v-model="detailContest.info"></el-input>
      </el-form-item>
    </el-form>
    </el-dialog>
    <!-- 添加队伍 -->
    <el-dialog
    style="margin-left: 30%;width: 40%;"
    :visible.sync="addTeamVisible">
      <el-form inline="inline" v-model="addTeamParam">
        <el-form-item label="队长姓名">
          <el-select v-model="addTeamParam.captainId">
            <el-option v-for="item in userOptions" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="队伍名称">
          <el-input v-model="addTeamParam.teamName">
          </el-input>
        </el-form-item>
        <el-form-item label="队伍介绍">
          <el-input type="textarea"
          v-model="addTeamParam.teamInfo">
          </el-input>
        </el-form-item>
        <el-form-item label="队伍需求">
          <el-input type="textarea" v-model="addTeamParam.teamDemand">
          </el-input>
        </el-form-item>
          <el-button style="width: 30%;" @click="cancelAddTeam">取消</el-button>
          <el-button style="margin-left: 20%;" type="primary" @click="addTeam">添加队伍</el-button>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>

import { addContest,getContestList,editContest ,getContestSpeciesList,removeContest, getUserList,createTeam } from '@/api/eventSection';
export default {
  data() {
    return {
      data: [],
      speciesList: [],
      userOptions:[],
      sortList:[{code:0,status:'进行中'},{code:1,status:'已截止'}],
      searchParam:{
        contestSpeciesId:'',
        status:0
      },
      detailContest:{
        id:'',
        name:'',
        speciesId:'',
        info:'',
        startDate:'',
        endDate:''
      },
      contest:{
        speciesId: '',
        name: '',
        info:'',
        startDate:'',
        endDate:''
      },
      editContestParams:{
        id:'',
        name:'',
        speciesId:'',
        info:'',
        startDate:'',
        endDate:'',
      },
      addTeamParam:{
        contestId:'',
        captainId:'',
        teamName:'',
        teamInfo:'',
        teamDemand:''
      },
      dialogVisible: false,
      editDialogVisible: false,
      detailContestVisible: false,
      addTeamVisible: false
    }
  },

  mounted() {
    this.init()
  },
  methods: {
    addTeam() {
      const addTeamParam = {
        name:this.addTeamParam.teamName,
        info:this.addTeamParam.teamInfo,
        demand:this.addTeamParam.teamDemand,
        contestId:this.addTeamParam.contestId,
        userId:this.addTeamParam.captainId
      };
      createTeam(addTeamParam).then(res => {
        if(res.data.code === 200){
          this.$message({
            message: res.data.msg,
            type: 'success'
          })
          this.addTeamParam = {
            contestId:'',
            captainId:'',
            teamName:'',
            teamInfo:'',
            teamDemand:''
          }
          this.getContestList()
          this.addTeamVisible = false;
        }else {
          this.$message({
            message: res.data.msg,
            type: 'error'
          })
        }   
      })
    },
    cancelAddTeam(){
      this.addTeamVisible = false;
    },
    openAddTeamDialog(contestId) {
      this.addTeamParam.contestId=contestId;
      this.addTeamVisible = true;
      getUserList().then(res => {
        if(res.data.code == 200) {
          this.userOptions = res.data.data;
        }else {
          this.$message({
            message: res.data.msg,
            type: 'error'
          })
        }    
      })
    },
    removeContest(contestId){
      removeContest({contestId:contestId}).then(res => {
        if(res.data.code === 200){
          this.$message({
            message: res.data.msg,
            type: 'success'
          })
          this.getContestList()
        }else {
          this.$message({
            message: res.data.msg,
            type: 'error'
          })
        }      
      })
    },
    reset(){
      this.searchParam.contestSpeciesId = this.speciesList[0].id
      this.searchParam.status = 0
      this.getContestList()
    },
    manageEventAnnouncement(contestId, contestName){
      this.$router.push({
              path: this.redirect || '/event-announcement',
              query:{
                contestId:contestId,
                contestName: contestName
              }
            })
    },
    getTeamInfo(contestId){
      this.$router.push({
              path: this.redirect || '/participating-teams',
              query:{
                contestId:contestId
              }
            })
    },
    openDetailDialog(row){
      this.detailContestVisible = true
      this.detailContest = row
    },
    speciesMappingToName(speciesId){
      const exist = this.speciesList.find(it=>it.id===speciesId)
      if(exist){
        return exist.name
      }else{
        return null
      }

    },
    async getContestSpeciesList() {
      await getContestSpeciesList().then(res => {
        if(res.data.code === 200){
          this.speciesList = res.data.data
          this.searchParam.contestSpeciesId = this.speciesList[0].id
        }else {
          this.$message({
            message: res.data.msg,
            type: 'error'
          })
        }        
      })
    },
    cancelEditDialog(){
      this.getContestList()
      this.editDialogVisible = false
    },
    openEditDialog(row){
      this.editDialogVisible = true
      this.editContestParams = {...row}
    },
    openDialog(){
      this.dialogVisible = true
    },
    cancelDialog(){
      this.dialogVisible = false
    },
    addContest(){
      addContest(this.contest).then(res =>{
        if(res.data.code === 200){
          this.$message({
            message: res.data.msg,
            type:'success'
          })
          this.dialogVisible = false
          this.getContestList()
        }else{
          this.$message({
            message: res.data.msg,
            type:'error'
          })
        }
      })
    },
    async init(){
      await this.getContestSpeciesList()
      await this.getContestList()
    },
     async getContestList(){
      await getContestList(this.searchParam).then(res =>{
        if(res.data.code === 200){
          this.data = res.data.data
        }else {
          this.$message({
            message: res.data.msg,
            type:'error'
          })
        }
      })
    },
    editContest(){ 
      editContest(this.editContestParams).then(res =>{
        if(res.data.code === 200){
          this.$message({
            message:res.data.msg,
            type:'success'
          })
          this.editDialogVisible = false
          this.getContestList()
        }else{
          this.$message({
            message: res.data.msg,
            type:'error'
          })
        }
      })
    }
  },

  destroyed() {
    // clearInterval(this.timer)
  },
  components: {
  }
}
</script>
<style scoped>
.data_input_inner >>> .el-input__inner{
  width: 70%;
}
.inputHeight >>> .el-input__inner{
  height:120%
}
.input_text_inner >>> .el-textarea__inner{
  display: inline-block;
  height: 200px;
}
</style>
